<template>
	<view>
		<pageHeader  @back='back' :fixed='fixed' >
			<text>我参与的</text>
			<text @tap="manage=!manage" class="toApply" slot="right" v-if="(active!='收藏'&&active!='点赞')&&list.length>0">{{manage?'完成':'编辑'}}</text>
		</pageHeader>
		<view style="height: 212rpx;"></view>
		<view class="big_title" :style="{top:fixed?'':'0'}">
			<text :class="{active:active=='收藏'}" @tap="toChooseBigTitle($event,'收藏')" :style="{marginRight:active=='收藏'?'134rpx':active=='点赞'?'140rpx':''}">收藏</text>
			<text :class="{active:active=='点赞'}" @tap="toChooseBigTitle($event,'点赞')" :style="{marginRight:active=='评论'?'140rpx':''}">点赞</text>
			<text :class="{active:active=='评论'}" @tap="toChooseBigTitle($event,'评论')" :style="{marginRight:active=='分享'?'133rpx':''}">评论</text>
			<text :class="{active:active=='分享'}" @tap="toChooseBigTitle($event,'分享')">分享</text>
		</view>
		<view class="title" :style="{top:fixed?'':'90rpx'}">
			<view class="title_body">
				<view :class="{title_active:activeState==1}" @tap="toChooseTitle($event,1)">
					家装设计
				</view>
				<view class="title_middle" :class="{title_active:activeState==2}" @tap="toChooseTitle($event,2)">
					软装产品
				</view>
				<view :class="{title_active:activeState==3}" @tap="toChooseTitle($event,3)">
					艺术精品
				</view>
			</view>
		</view>
		<view style="margin-top: -30rpx;" v-if="(active=='收藏'||active=='点赞')&&activeState==2&&list.length>0">
			<softProducts v-for='(item,index) in list' :key='index' :message='item' :index='index' :isIndex='true' @collect='homeDesignCollect' @praise='homeDesignPraise'/>
			<view style="height: 30rpx;"></view>
		</view>
		<view style="margin-top: -30rpx;" v-if="(active=='收藏'||active=='点赞')&&activeState==1&&list.length>0">
			<template v-for="(item,index) in list">
				<homeDesign :key='index' :message='item' :index='index' :isIndex='true' @collect='homeDesignCollect' @praise='homeDesignPraise'/>
			</template>
			<view style="height: 30rpx;"></view>
		</view>
		<view style="margin-top: -30rpx" :style="{height:height}" v-if="(active=='点赞')&&activeState==3&&list.length>0">
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='list'>
				<xgWaterfallItem  v-for='(item,index) in list' :key='index' >
					<fineArt :message='item' @praise='homeDesignPraise' :index='index'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<view style="margin-top: -30rpx" :style="{height:height}" v-if="(active=='收藏')&&activeState==3&&list.length>0">
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='list'>
				<xgWaterfallItem  v-for='(item,index) in list' :key='index' >
					<fineArt :message='item' @praise='homeDesignPraise' :index='index'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<view style="height: 30rpx;" v-if="(active=='收藏'||active=='点赞')&&activeState==3"></view>
		<view style="margin-top: -30rpx;" v-if="active=='评论'&&list.length>0">
			<view class="body" v-for="(item,index) in list" :key='index' @tap='toChooseD($event,index)'>
				<view class="body_todo" :style="{marginLeft:manage?'0':'-98rpx'}">
					<view :class="{choosed:item.choosed}"></view>
				</view>
				<discuss :message='item'/>
			</view>
		</view>	
		<view style="margin-top: -30rpx;" v-if="active=='分享'&&activeState==2&&list.length>0">
			<view class="body" v-for="(item,index) in list" :key='index' @tap='toChooseD($event,index)'>
				<view class="body_todo" :style="{marginLeft:manage?'0':'-98rpx'}">
					<view :class="{choosed:item.choosed}"></view>
				</view>
				<softProducts v-for='(item,index) in list' :key='index' :message='item' :index='index' :isIndex='true' @collect='homeDesignCollect' @praise='homeDesignPraise'/>
			</view>
		</view>	
		<view style="margin-top: -30rpx;" v-if="active=='分享'&&activeState==1&&list.length>0">
			<view class="body" v-for="(item,index) in list" :key='index' @tap='toChooseD($event,index)'>
				<view class="body_todo" :style="{marginLeft:manage?'0':'-98rpx'}">
					<view :class="{choosed:item.choosed}"></view>
				</view>
				<template v-for="(item,index) in list">
					<homeDesign :key='index' :message='item' :index='index' :isIndex='true' @collect='homeDesignCollect' @praise='homeDesignPraise'/>
				</template>
			</view>
		</view>	
		<view style="margin-top: -30rpx" :style="{height:height}" v-if="active=='分享'&&activeState==3&&list.length>0">
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='list'>
				<xgWaterfallItem  v-for='(item,index) in list' :key='index' >
					<fineArt :message='item' @praise='homeDesignPraise' :index='index' :isNeedChoose='manage' :ischoose='item.choosed' @choose='toChooseD'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<view class="noResult" v-if="list.length<=0&&!showLoading">
			<image src="/static/img/noShou.png" mode="" v-if="active=='收藏'"></image>
			<image src="/static/img/nosou.png" mode="" v-else></image>
			<text>暂无{{active}}</text>
		</view>
		<uni-load-more status="loading"  v-if="showLoading" style="margin-top: 30rpx;"/>
		<uni-load-more status="noMore" v-if="list.length>0&&!showLoading&&!hasMore"  style="margin-top: 30rpx;"/>
		<view class="allChoose" v-if="manage&&list.length>0">
			<view :class="{choosed:allChoose}" @tap='toChangeAllChoose'></view>
			<text>全选</text>
			<text class="dele" @tap='deleChoose'>删除</text>
		</view>
		<view :style="{height:(manage&&list.length>0)?'139rpx':'30rpx'}" v-if="active=='评论'||active=='分享'"></view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import urls from "@/common/util/homeArtIndex.js"
	import softProducts from "@/components/index/softProducts.vue"
	import pageHeader from "@/components/header/header.vue"
	import homeDesign from "@/components/index/homeDesign.vue"
	import fineArt from "@/components/index/fineArt.vue"
	import discuss from "@/components/myPartake/discuss.vue"
	import xgWaterfall from "@/components/xg-waterfall/xg-waterfall.vue"
	import xgWaterfallItem from "@/components/xg-waterfall-item/xg-waterfall-item.vue"
	export default {
		components: {pageHeader,softProducts,homeDesign,fineArt,xgWaterfall,xgWaterfallItem,discuss,uniLoadMore},
		data() {
			return {
				fixed:true,
				manage:false,
				active:'收藏',
				activeState:1,
				next:0,
				list:[],
				height:0,
				allChoose:false,
				showLoading:false,
				hasMore:true,
				pageNumber:1
			};
		},
		watch: {
			manage() {
				for(let key in this.list){
					this.list[key].choosed=false
				}
				this.allChoose=false
				this.fixed=true
			}
		},
		onReachBottom(){
			if(this.hasMore){
				this.pageNumber+=1
				this.getMessage()
			}
		},	
		onShow() {
			this.list=[]
			this.pageNumber=1
			this.hasMore=true
			this.fixed=true
			this.getMessage()
		},
		onPageScroll(e){
			if(this.next>uni.getSystemInfoSync().windowWidth*300/750){
				if(!this.manage){
					if(this.next-e.scrollTop>3){
						this.fixed=true
					}else if(e.scrollTop-this.next>3){
						this.fixed=false
					}
				}
			}else{
				this.fixed=true
			}
			this.next=e.scrollTop
		},
		methods: {
			async getMessage(){
				this.showLoading=true
				let data={}
				data.category=this.activeState
				switch (this.active){
					case '评论':
						data.state=2
						break;
					case '收藏':
						data.state=0
						break;
					case '点赞':
						data.state=1
						break;
					case '分享':
						data.state=3
						break;			
					default:
						break;
				}
				data.userId=localStorage.getItem("userId")
				data.page=this.pageNumber
				switch (this.active){
					case '评论':
						data.count=8
						break;
					case '点赞':	
					case '收藏':
					case '分享':
						switch (this.activeState){
							case 1:
							case '1':
							case 2:
							case '2':
								data.count=5
								break;
							case 3:
							case '3':
								data.count=12
								break;		
							default:
								break;
						}
						break;		
					default:
						break;
				}
				let res=await urls.myShare(data)
				let list=res.data.list
				for(let a=0;a<list.length;a++){
					this.list.push(list[a])
				}
				if(res.data.hasMore==0){
					this.hasMore=false
				}else{
					this.hasMore=true
				}
				this.showLoading=false
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toChooseTitle(e,state){
				if(this.activeState==state){
					return
				}
				this.manage=false
				this.height=0
				this.activeState=state
				this.list=[]
				this.pageNumber=1
				this.hasMore=true
				this.fixed=true
				this.getMessage()
				
			},
			toChooseBigTitle(e,state){
				if(this.active==state){
					return
				}
				this.manage=false
				this.height=0
				this.active=state
				this.list=[]
				this.pageNumber=1
				this.hasMore=true
				this.fixed=true
				this.getMessage()
			},
			toChooseD(E,index){
				if(this.manage){
					this.list[index].choosed=!this.list[index].choosed
					let allChoose=true
					for(let key in this.list){
						if(!this.list[key].choosed){
							allChoose=false
							break
						}
					}
					this.allChoose=allChoose
					this.$forceUpdate()
				}else{
					if(this.active=='分享'){
						return
					}
					if(this.list[index].designId){
						uni.navigateTo({
							url: '/pages/homeDesign/homeDesignIndex?id='+this.list[index].designId+'&designStyle='+this.list[index].designStyle+"&designPlace="+this.list[index].designPlace
						})
					}else if(this.list[index].softId){
						uni.navigateTo({
							url: '/pages/softProducts/softProductsIndex?id='+this.list[index].softId+'&softStyle='+this.list[index].softStyle+"&softPlace="+this.list[index].softPlace
						})
					}else if(this.list[index].fineId){
						if(this.list[index].category==0){
							uni.navigateTo({
								url: '/pages/fineArts/fineArtIndex?fineId='+this.list[index].fineId+"&State="+this.list[index].category
							})
						}else{
							uni.navigateTo({
								url: '/pages/fineArts/fineArtsInformation?fineId='+this.list[index].fineId+"&State="+this.list[index].category
							})
						}
					}
				}
			},
			toChangeAllChoose(){
				this.allChoose=!this.allChoose
				for(let key in this.list){
					this.list[key].choosed=this.allChoose
				}
			},
			async deleChoose(){
				let list=[],list1=[],list3=[]
				for(let a=0;a<this.list.length;a++){
					if(this.list[a].choosed){
						list3.push(this.list[a].participateId)
						list1.push(this.list[a].commentId)
						if(this.list[a].fineId){
							list.push(this.list[a].fineId)
						}else if(this.list[a].softId){
							list.push(this.list[a].softId)
						}else if(this.list[a].designId){
							list.push(this.list[a].designId)
						}
					}
				}
				let res={}
				if(this.active=='评论'){
					let data={}
					data.designId=list.join(",")
					data.commentId=list1.join(",")
					data.userId=localStorage.getItem("userId")
					data.state=this.activeState
					res=await urls.batchDelete(data)
				}else if(this.active=='分享'){
					let data={}
					data.id=list3.join(",")
					res=await urls.deleteShare(data)
				}
				if(res.code==0){
					if(this.allChoose){
						this.list=[]
						this.manage=false
					}else{
						if(list.length>0){
							for(let a=0;a<this.list.length;a++){
								if(this.list[a].choosed){
									this.list.splice(a,1)
									a-=1
								}
							}
						}
					}
					if(this.list.length==0){
						this.height=0
					}
				}
			},
			success(e){
				this.height=e+'px'
			},
			homeDesignCollect(index,isAlready){
				if(this.active=='收藏'){
					this.list.splice(index,1)
					return
				}
				if(!isAlready){
					this.list[index].collection="1"
					this.list[index].collectionNumber-=1
				}else{
					this.list[index].collection="0"
					this.list[index].collectionNumber+=1
				}	
			},
			homeDesignPraise(index,isAlready){
				if(this.active=='点赞'){
					this.list.splice(index,1)
					return
				}
				if(!isAlready){
					this.list[index].zan="1"
					this.list[index].zanNumber-=1
				}else{
					this.list[index].zan="0"
					this.list[index].zanNumber+=1
				}	
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F7F7F7;
}
.toApply{
	font-size: 32rpx;
	color:#A66354 ;
	line-height: 32rpx;
	letter-spacing: 1rpx;
	margin-right: 30rpx;
}
.big_title{
	background-color: #FFFFFF;
	height: 90rpx;
	position: fixed;
	z-index: 995;
	width: 750rpx;
	top: 88rpx;
	left: 0;
	display: flex;
	padding-left:40rpx;
	text{
		display: block;
		height: 100%;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #AEA8A2;
		letter-spacing: 1rpx;
		margin-right: 146rpx;
	}
	.active{
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
		margin-right: 140rpx;
		position: relative;
	}
}
.big_title>text:last-of-type{
	margin-right: 0;
}
.active::after{
	content: "";
	display: block;
	height: 6rpx;
	width: 34rpx;
	border-radius: 5rpx;
	background-color: #333333;
	position: absolute;
	left: 0;
	bottom: 0;
}
.title{
	height: 122rpx;
	position: fixed;
	z-index: 995;
	width: 750rpx;
	top: 178rpx;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F7F7F7;
	.title_body{
		height: 70rpx;
		border: 1rpx solid #C84739;
		border-radius: 62rpx;
		display: flex;
		overflow: hidden;
		view{
			width: 230rpx;
			height: 100%;
			color:#C84739 ;
			font-size: 28rpx;
			line-height: 28rpx;
			letter-spacing: 1rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			margin: 0;
		}
		.title_middle{
			border-left: 1rpx solid #C84739;
			border-right:1rpx solid #C84739 ;
		}
		.title_active{
			background-color:#C84739 ;
			color:#FFFFFF ;
		}
	}
}
.noResult{
	display: flex;
	flex-flow: column;
	align-items: center;
	padding-top: 143rpx;
	image{
		height: 289rpx;
		width: 374rpx;
		display: block;
	}
	text{
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 1rpx;
		margin-top: 60rpx;
	}
}
.body{
	width: 750rpx;
	overflow-x: hidden;
	display: flex;
	align-items: center;
	.body_todo{
		width: 98rpx;
		min-width: 98rpx;
		display: flex;
		justify-content: center;
		overflow-x: hidden;
		transition: margin-left 0.2s;
		view{
			min-width:42rpx;
			height: 42rpx;
			width: 42rpx;
			border-radius: 50%;
			border: 2rpx solid #BBBBBB;
		}
	}
}
.allChoose{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 750rpx;
	height: 109rpx;
	background-color:#FFFFFF ;
	border-top: 1rpx solid #EEEEEE;
	display: flex;
	align-items: center;
	view{
		height: 42rpx;
		width: 42rpx;
		border-radius: 50%;
		border: 2rpx solid #BBBBBB;
		margin-left:30rpx;
	}
	text{
		font-size: 26rpx;
		color:#666666 ;
		line-height: 37rpx;
		letter-spacing: 1rpx;
		margin-left: 20rpx;
	}
	.dele{
		display: block;
		height: 70rpx;
		width: 186rpx;
		position: absolute;
		right: 30rpx;
		border: 1rpx solid #C84739;
		font-size: 28rpx;
		color:#C84739;
		line-height: 70rpx;
		text-align: center;
		margin-left: 0;
		border-radius:40rpx ;
		
	}
}
.choosed{
	background-image: url('/static/svg/isChoose.svg');
	background-position: 0 0 ;
	background-repeat: no-repeat;
	background-size: 100%;
	border: 0 !important;
}
</style>
